<!--

  自定义的盒子

  // 带*号表示必填属性
  props:
    *title:(String)              指定盒子的标题     使用title具名插槽时可以不用填写该属性

  slot:
    default:                     默认插槽 盒子主体容器
    title:                       自定义盒子的标题
    after-title:                 自定义标题右端的插槽

  demo:
  <qm-block title="资讯">

    <f7-link slot="after-title">  // 标题右端的插槽
      更多资讯
      <f7-icon f7="chevron_right"></f7-icon>
    </f7-link>

    <div> // 默认插槽 盒子主体容器 将内容放在默认插槽中
      ...
    </div>
  </qm-block>

-->



<template>
  <div class="qm-block" :style="qmBlockStyle">
    <div class="qm-block-title">
      <div class="qm-block-title-name">
        <slot name="title">{{ title }}</slot>
        <span class="qm-block-title-smtitle">{{smtitle}}</span>
      </div>
      <div class="qm-block-title-after" >
        <slot name="after-title"></slot>
      </div>
    </div>
    <div class="qm-block-content" :style="qmpaddingStyle">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "标题",
    },
    //小标题
    smtitle:{
      type:String,
    },
    titleWeight: Number,
    titleSize: Number,
    needpadding:{
      type:Boolean,
      default:true
    }
  },

  computed: {
    qmBlockStyle() {
      return {
        "--title-size": this.titleSize ? `calc(${this.titleSize}px * var(--ratio))` : "var(--font-size-maintitle)",
        "--title-weight": this.titleWeight ? this.titleWeight : 600,
      }
    },
    qmpaddingStyle(){
      return{
        'padding':this.needpadding?'0px calc(32px * var(--ratio)) 0':'0px'
      }
    }
  }
};
</script>

<style lang="less" scoped>
.qm-block {
  padding-bottom:calc(32px * var(--ratio)) ;
  &-title {
    // padding: calc(32px * var(--ratio)) calc(32px * var(--ratio)) 10px;
    padding: 0px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-subtitle);
    font-weight: var(--title-weight);
    color: var(--color-text-title);
    &-name{
      margin: 15px 20px 15px 30px;
    }
    &-after {
      display: inline-flex;
      align-items: center;
      font-size: var(--font-size-subcontent-2);
      color: var(--color-text-subtext);
      font-weight: 400;
    }
    &-smtitle{
      color: #babbbd;
      font-size: 10px;
      font-weight: 400;
    }
  }
  &-content {
    margin-top: calc(20px * var(--ratio));
  }
}
</style>
